<!DOCTYPE html>
{% load i18n %}
<html>
<head>
    {% block head %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>只此秦旅——基于大模型内容生成的来陕旅游手账制作系统 </title>
    <link rel="stylesheet" href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-magic-vue/css/bk-magic-vue.min.css">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <link href="{{ REMOTE_STATIC_URL }}v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/components_pro/layout6/css/index.css"
              rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/dialog.css" rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker-2.0.css"
              rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/themes/default/css/umeditor.css"
              rel="stylesheet">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }
        .bk-horz-nav11 {
            background-image: linear-gradient(to right, #232947, #232947);
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .bk-nav-logo {
            display: flex;
            align-items: center;
        }
        .bk-nav-logo img {
            height: 30px;
            margin-right: 10px;
        }
        .bk-nav-user {
            display: flex;
            align-items: center;
        }
        .bk-nav-user img {
            height: 30px;
            margin-left: 10px;
        }
        .bk-nav-links {
            color: white;
            list-style-type: none;
            display: flex;
            margin: 0;
            padding: 0;
        }
        .bk-nav-links li a {
            color: white;
            margin-left: 20px;
            position: relative;
        }
        .bk-nav-links a {
            color: white;
            text-decoration: none;
        }
        .bk-submenu {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            padding: 10px;
            z-index: 1000;
        }
        .bk-submenu li {
            margin: 5px 0;
        }
        .bk-submenu a {
            color: #333;
        }
        #main-content {
            display: flex;
            height: calc(100vh - 50px);
        }
        #bk-sidebar2 {
            width: 260px;
            background-color: #f0f2f5;
            overflow-y: auto;
        }
        .sidebar-inner ul {
            list-style-type: none;
            padding: 0;
        }
        .sidebar-inner li {
            padding: 10px 20px;
        }
        .sidebar-inner a {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        .sidebar-inner i {
            margin-right: 10px;
        }
        #main-panel {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
        }
        /* 一级菜单样式 */
    .first-menu > a {
        display: block;
        padding: 10px 15px;
        border-radius: 5px; /* 圆角 */
        background-color: #f8f8f8;
        color: #333;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s, box-shadow 0.3s; /* 平滑过渡 */
    }

    .first-menu > a.on {
        background-color: #c2cedc; /* 点击后的背景色 */
        color: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 点击后的阴影效果 */
    }

    .first-menu > a:hover {
        background-color: #A1CEE5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* 二级菜单样式 */
    .second-menu {
        display: none;
        padding-left: 20px;
        margin-top: 10px;
    }

    .second-menu a {
        display: block;
        padding: 8px 12px;
        color: #555;
        text-decoration: none;
        border-radius: 4px; /* 二级菜单圆角 */
        transition: background-color 0.3s;
    }

    .second-menu a:hover {
        background-color: #ecf0f1;
    }

    /* 右侧的rate样式 */
    .pull-right.rate {
        transform: rotate(90deg); /* 改变箭头的方向 */
        transition: transform 0.3s;
    }
    </style>
    {% endblock %}
</head>


<body>
    <!--顶部导航 Start-->
    <nav class="bk-horz-nav11">
        <div class="bk-nav-logo fl">
            <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo1.png">只此秦旅——基于大模型内容生成的来陕旅游手账制作系统
        </div>
        <ul class="bk-nav-links fr">
            <li>
                <a href="{{ SITE_URL }}">首页</a>
            </li>

            <li class="bk-has-submenu">
                <a href="javascript:; ">功能1</a>
                <ul class="bk-submenu">
                    <li>
                        <a href="{{ SITE_URL }}administrators/">1-1</a>
                    </li>
                    <li>
                        <a href="{{ SITE_URL }}submitter/">1-2</a>
                    </li>
                </ul>
            </li>
            <li class="bk-has-submenu">
                <a href="javascript:;">功能2</a>
                <ul class="bk-submenu">
                    <li>
                        <a href="{{ SITE_URL }}my_apply/">2-1</a>
                    </li>
                    <li>
                        <a href="{{ SITE_URL }}my_check/">2-2</a>
                    </li>
                </ul>
            </li>
            <li class="bk-has-submenu">
                <a href="javascript:;">功能3</a>
                <ul class="bk-submenu">
                    <li>
                        <a href="{{ SITE_URL }}scenic-spots/">3-1</a>
                    </li>
                    <li>
                        <a href="{{ SITE_URL }}qa_pairs/">3-2</a>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="bk-nav-user">
            <span class="mr5">admin</span>
            <img src="https://magicbox.bk.tencent.com/static_api/v3/components_pro/horizontal_nav1/images/avatar.png" alt="User Avatar">
        </div>
    </nav>
    <!--顶部导航 End-->


    <div id="main-content">
        <!-- 垂直导航 Start -->
        <div class="bk-sidebar2" id="bk-sidebar2">
            <div class="sidebar-inner">
                <ul>
                    <li class="first-menu">
                        <a href="{{ SITE_URL }}">
                            <i class="bk-icon icon-pc"></i>主页
                        </a>
                    </li>
                    <li class="first-menu">
                        <a href="{{ SITE_URL }}role/">
                            <i class="bk-icon icon-id"></i>角色管理
                        </a>
                    </li>
                    <li class="first-menu has_submenu">
                        <a href="javascript:;">
                            <i class="bk-icon icon-panel-permission"></i>计算
                            <span class="pull-right"><i class="bk-icon icon-angle-down angle"></i></span>
                        </a>
                        <ul class="sub-menu second-menu">
                            <li>
                                <a href="{{ SITE_URL }}calc1/">计算一</a>
                            </li>
                            <li>
                                <a href="{{ SITE_URL }}calc2/">计算二</a>
                            </li>
                        </ul>
                    </li>
                    <li class="first-menu has_submenu">
                        <a href="javascript:;">
                            <i class="bk-icon icon-heart"></i>增强服务
                            <span class="pull-right"><i class="bk-icon icon-angle-down angle"></i></span>
                        </a>
                        <ul class="sub-menu second-menu">
                            <li>
                                <a href="{{ SITE_URL }}save/">数据储存</a>
                            </li>
                            <li>
                                <a href="{{ SITE_URL }}warn/">告警监控</a>
                            </li>
                        </ul>
                    </li>
                    <li class="first-menu has_submenu">
                        <a href="javascript:;">
                            <i class="bk-icon icon-script-file"></i>代码管理
                            <span class="pull-right"><i class="bk-icon icon-angle-down angle"></i></span>
                        </a>
                        <ul class="second-menu">
                            <li>
                                <a href="{{ SITE_URL }}code1/">代码一</a>
                            </li>
                            <li>
                                <a href="{{ SITE_URL }}code2/">代码二</a>
                            </li>
                        </ul>
                    </li>
                    <!-- Add more menu items as needed -->
                </ul>
            </div>
        </div>
        <!-- 垂直导航 End -->

        <div id="main-panel">
            <!-- 固定宽度居中 start -->
            {% block content %}

            {% endblock %}
            <!-- 固定宽度居中 end -->
        </div>
    </div>

</body>

{% block base_js %}

    <script type="text/javascript">
    (
        function() {
        // bk-sidebar2_js_start
        $("#bk-sidebar2").on("click", "ul .first-menu > a", function() {
            var _this = $(this);
            // 移除所有菜单的选中状态
            $(".first-menu > a").removeClass("on");
            // 添加当前点击的菜单选中状态
            _this.addClass("on");

            // 隐藏其他二级菜单
            _this.parent(".first-menu").siblings().find(".pull-right").removeClass("rate");
            _this.parent(".first-menu").siblings().find(".second-menu").stop().slideUp();

            // 如果菜单项有子菜单
            if (_this.parent(".first-menu").hasClass("has_submenu")) {
                _this.parent(".first-menu").find(".pull-right").toggleClass("rate");
                _this.parent(".first-menu").find(".second-menu").stop().slideToggle();
            } else {
                return false;
            }
        });
        // bk-sidebar2_js_end
    })();

    </script>
{% endblock %}





{% block extra_block %}
    <!--
		这里放置子页面中附加内容，一般为js，注意子模版中的js如果使用到以上js库，必须放置在这里
	 -->
{% endblock %}
</html>